<template>
  <a-modal
    title="审核医院"
    wrapClassName="common_modal audit_hosp_modal"
    :maskClosable="false"
    v-model:open="visible"
    :confirm-loading="confirmLoading"
    okText="审核通过"
    @ok="handleOk"
    @cancel="handleCancel"
    centered
    width="50%"
  >
    <a-descriptions layout="vertical" size="small" :title="hospInfo.hospName" bordered :column="24">
      <a-descriptions-item label="医院等级" :span="8">
        {{ hospInfo.hospGradeStr }}
      </a-descriptions-item>
      <a-descriptions-item label="法定代表人" :span="8">
        {{ hospInfo.legalPersonName }}
      </a-descriptions-item>
      <a-descriptions-item label="联系电话" :span="8">
        {{ hospInfo.hospPhone }}
      </a-descriptions-item>
      <a-descriptions-item label="医院logo" :span="12">
        <img
          style="width: 120px; padding: 10px"
          :src="hospInfo.hospLogo"
          @click="previewLogo()"
          alt="医院logo"
        />
      </a-descriptions-item>
      <a-descriptions-item label="营业执照" :span="12">
        <span v-if="imgList.length" @click="toPreviewImg()"><FileImageOutlined /></span>
        <span v-for="(item, index) in pdfList" :key="index" @click="toPreviewPdf(item)"
          ><FileOutlined
        /></span>
        <span v-if="imgList.length || pdfList.length">（点击查看）</span>
      </a-descriptions-item>
      <a-descriptions-item label="执业范围" :span="24">
        {{ hospInfo.hospPracticeScope }}</a-descriptions-item
      >
      <a-descriptions-item label="地址" :span="24">
        {{ hospInfo.hospAddress }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script lang="ts" setup>
import { userAudit } from '@/axios/api/user_api'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { FileImageOutlined, FileOutlined } from '@ant-design/icons-vue'
interface ImgType {
  src: string
  sort: number
}
const emit = defineEmits(['getPage'])
const [messageApi] = message.useMessage()
const visible = ref(false)
const confirmLoading = ref(false)
const hospInfo = ref<any>({})
const imgList = ref<ImgType[]>([])
const pdfList = ref<string[]>([])
function getFileType(url: string) {
  let index = url.lastIndexOf('.')
  let ext = url.substr(index + 1)
  if (ext === 'pdf') {
    return 'pdf'
  } else {
    return 'img'
  }
}
function showModal(data: any) {
  visible.value = true
  imgList.value = []
  pdfList.value = []
  hospInfo.value = data
  let tempList = data.hospCertificateList
  if (tempList && tempList.length) {
    tempList.forEach((urlItem: string, index: number) => {
      let urltype = getFileType(urlItem)
      if (urltype === 'img') {
        imgList.value.push({ src: urlItem, sort: index + 1 })
      } else {
        pdfList.value.push(urlItem)
      }
    })
  }
}
function handleOk() {
  confirmLoading.value = true
  userAudit({ id: hospInfo.value.userId, verified: true })
    .then((data) => {
      if (data.code === 200) {
        messageApi.success(data.msg)
        emit('getPage')
        visible.value = false
      }
    })
    .finally(() => {
      confirmLoading.value = false
    })
}
function handleCancel() {
  visible.value = false
}
function toPreviewPdf(url: string) {
  console.log('%c [ url ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', url)
}
function toPreviewImg() {
  console.log('%c [ imgList ]-92', 'font-size:13px; background:pink; color:#bf2c9f;', imgList)
}
function previewLogo() {
  console.log(
    '%c [ previewLogo ]-115',
    'font-size:13px; background:pink; color:#bf2c9f;',
    previewLogo
  )
}
defineExpose({
  showModal
})
</script>
